<template>
    <!-- 主题类型：小微 资讯 -->
    <div class="list-info-component-container">
        <div class="list-info-component-item-big" v-if="info.content.modelid==12 || info.content.banner">
            <!-- 大图1 -->
            <a class="list-info-component-title-big"
               :href="info.content.modelurl">
                {{info.content.title}}
            </a>
            <a class="list-info-component-img-big"
               :href="info.content.modelurl"
               v-if="info.content.banner">
                <img v-lazy="info.content.banner[0]"/>
            </a>
            <router-link class="list-info-component-info-big"
                         :to="{name: 'Index', params: {channelid: info.content.spaceid}}">
                <div class="floatL">{{info.content.source||info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.sorttime)}}
                </div>
                <div class="floatR">{{this.simpleNum(info.content.pv)}}看过</div>
                <div class="clearBoth"></div>
            </router-link>
        </div>
        <div class="list-info-component-item-big" v-else-if="info.content.bigimage">
            <!-- 大图2 -->
            <a class="list-info-component-title-big"
               :href="info.content.modelurl">
                {{info.content.title}}
            </a>
            <a class="list-info-component-img-big"
               :href="info.content.modelurl"
               v-if="info.content.bigimage">
                <img v-lazy="info.content.bigimage"/>
            </a>
            <router-link class="list-info-component-info-big"
                         :to="{name: 'Index', params: {channelid: info.content.spaceid}}">
                <div class="floatL">{{info.content.source||info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.sorttime)}}
                </div>
                <div class="floatR">{{this.simpleNum(info.content.pv)}}看过</div>
                <div class="clearBoth"></div>
            </router-link>
        </div>
        <div class="list-info-component-item-big"
             v-else-if="info.content.modelid==7 || info.content.modelid==8 || info.content.modelid==9 || info.content.modelid==10 || info.content.modelid==11">
            <!-- 大图3 -->
            <a class="list-info-component-title-big"
               :href="info.content.modelurl">
                {{info.content.title}}
            </a>
            <a class="list-info-component-img-big"
               :href="info.content.modelurl"
               v-if="info.content.thumb">
                <img v-lazy="info.content.thumb"/>
            </a>
            <router-link class="list-info-component-info-big"
                         :to="{name: 'Index', params: {channelid: info.content.spaceid}}">
                <div class="floatL">{{info.content.source||info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.sorttime)}}
                </div>
                <div class="floatR">{{this.simpleNum(info.content.pv)}}看过</div>
                <div class="clearBoth"></div>
            </router-link>
        </div>
        <div class="list-info-component-item-triple" v-else-if="info.content.modelid==2">
            <!-- 多图1 -->
            <a class="list-info-component-title-triple"
               :href="info.content.modelurl">
                {{info.content.title}}
            </a>
            <a class="list-info-component-img-triple"
               :href="info.content.modelurl"
               v-if="info.content.images&&index<3" v-for="(pic,index) in info.content.images">
                <img v-lazy="pic.image"/>
            </a>
            <div class="clearBoth"></div>
            <router-link class="list-info-component-info-triple"
                         :to="{name: 'Index', params: {channelid: info.content.spaceid}}">
                <div class="floatL">{{info.content.source||info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.sorttime)}}
                </div>

                <div class="clearBoth"></div>
            </router-link>
        </div>
        <div class="list-info-component-item-triple"
             v-else-if="info.content.spacepic && info.content.spacepic.length>1">
            <!-- 多图2 -->
            <a class="list-info-component-title-triple"
               :href="info.content.modelurl">
                {{info.content.title}}
            </a>
            <a class="list-info-component-img-triple"
               :href="info.content.modelurl"
               v-if="info.content.spacepic&&index<3" v-for="(pic,index) in info.content.spacepic">
                <img v-lazy="pic.image"/>
            </a>
            <div class="clearBoth"></div>
            <router-link class="list-info-component-info-triple"
                         :to="{name: 'Index', params: {channelid: info.content.spaceid}}">
                <div class="floatL">{{info.content.source||info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.sorttime)}}
                </div>

                <div class="clearBoth"></div>
            </router-link>
        </div>
        <div class="list-info-component-item-big"
             v-else-if="!info.content.bigimage&&!info.content.thumb&&(!info.content.spacepic || info.content.spacepic.length==0)">
            <!-- 大图2 -->
            <a class="list-info-component-title-big"
               :href="info.content.modelurl">
                {{info.content.title}}
            </a>
            <div style="height:10px;"></div>
            <router-link class="list-info-component-info-big"
                         :to="{name: 'Index', params: {channelid: info.content.spaceid}}">
                <div class="floatL">{{info.content.source||info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.sorttime)}}
                </div>

                <div class="clearBoth"></div>
            </router-link>
        </div>
        <div class="list-info-component-item-single" v-else>
            <!-- 单图 -->
            <div class="list-info-component-item-single-bob">
                <a class="list-info-component-title-single"
                   :href="info.content.modelurl">
                    {{info.content.title}}
                </a>
                <div class="single-component-takeup"></div>
                <router-link class="list-info-component-info-single"
                             :to="{name: 'Index', params: {channelid: info.content.spaceid, contentid: info.content.contentid}}">
                    <div class="list-info-component-info-single-left">
                        {{info.content.source||info.content.channelName}}&nbsp;&nbsp;
                        {{this.toCommonTime(info.content.sorttime)}}
                    </div>

                    <div class="clearBoth"></div>
                </router-link>
            </div>
            <a class="list-info-component-img-single" :href="info.content.modelurl">
                <img v-lazy="info.content.spacepic[0]"
                     v-if="info.content.spacepic && info.content.spacepic.length > 0"/>
                <img v-lazy="info.content.thumb"
                     v-else/>
            </a>
            <div class="clearBoth"></div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        mounted: function () {
            // console.log("==========================");
            // console.log(JSON.stringify(this.info, undefined, 2));
            // console.log("==========================");
        }
    }
</script>

<style>
    .list-info-component-container {
    }

    .list-info-component-item-single,
    .list-info-component-item-big,
    .list-info-component-item-triple {
        padding: 0.4rem 0;
        margin: 0.4rem auto;
        border-bottom: 0.06rem solid #EDEDED;
        position: relative;
    }

    .list-info-component-title-single,
    .list-info-component-title-big,
    .list-info-component-title-triple {
        font-size: 1.0rem;
        line-height: 1.3rem;
        color: #444444;
        max-height: 2.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-decoration: none;
    }

    /* 信息栏 */
    .list-info-component-item-single-bob {
        width: 60%;
        float: left;
    }

    /* 单图部分 */
    /*.list-info-component-title-single {*/
    /*display: block;*/
    /*height: 3.5rem;*/
    /*max-height: 3.5rem !important;*/
    /*}*/

    .list-info-component-info-single-left {
        width: 100%;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-info-component-info-single-right {
        width: 40%;
        float: right;
        text-align: right;
    }

    /* 单图图片部分 */
    .list-info-component-img-single {
        width: 6.9rem;
        height: 4.6rem;
        float: right;
        display: block;
    }

    .list-info-component-img-single img {
        width: 100%;
        height: 100%;
    }

    /* 多图和大图部分 */
    .list-info-component-info-single,
    .list-info-component-info-big,
    .list-info-component-info-triple {
        font-size: 0.5rem;
        color: #999999;
        line-height: 1.1rem;
        display: block;
    }

    .list-info-component-img-big {
        width: 100%;
        position: relative;
        padding-bottom: 40%;
        margin: 0.3rem auto;
        display: block;
    }

    .list-info-component-img-triple {
        width: 32.333%;
        margin: 0.3rem 0.5%;
        padding-bottom: 21.566%;
        float: left;
        position: relative;
    }

    .list-info-component-img-big img,
    .list-info-component-img-triple img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
    }
</style>